<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业官网 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="logo">
                <h1>品牌名称</h1>
            </div>
            <nav>
                <ul>
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="services.html">服务项目</a></li>
                    <li><a href="products.html">产品展示</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
            <div class="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>欢迎访问我们的企业官网</h1>
                <p>提供专业解决方案，助力您的企业创新发展</p>
                <a href="contact.html" class="btn">联系我们</a>
            </div>
        </div>
    </section>

    <!-- 服务介绍 -->
    <section class="services">
        <div class="container">
            <h2 class="section-title">我们的服务</h2>
            <div class="services-grid">
                <div class="service-card">
                    <i class="fas fa-chart-line"></i>
                    <h3>战略咨询</h3>
                    <p>为您的企业提供全方位的战略规划和市场分析</p>
                </div>
                <div class="service-card">
                    <i class="fas fa-code"></i>
                    <h3>技术开发</h3>
                    <p>专业的技术团队，为您打造定制化的解决方案</p>
                </div>
                <div class="service-card">
                    <i class="fas fa-bullhorn"></i>
                    <h3>营销推广</h3>
                    <p>多渠道营销策略，帮助您的品牌获得更多曝光</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们简介 -->
    <section class="about-preview">
        <div class="container">
            <div class="about-content">
                <h2 class="section-title">关于我们</h2>
                <p>我们是一家致力于提供高质量服务的企业，凭借多年行业经验和专业团队，我们已成功帮助众多企业实现业务增长和转型升级。</p>
                <a href="about.html" class="btn">了解更多</a>
            </div>
            <div class="about-image">
                <img src="images/about.jpg" alt="关于我们">
            </div>
        </div>
    </section>

    <!-- 客户案例 -->
    <section class="case-studies">
        <div class="container">
            <h2 class="section-title">客户案例</h2>
            <div class="cases-grid">
                <div class="case-card">
                    <img src="images/case1.jpg" alt="案例1">
                    <h3>案例标题1</h3>
                    <p>简短描述案例内容和成果</p>
                </div>
                <div class="case-card">
                    <img src="images/case2.jpg" alt="案例2">
                    <h3>案例标题2</h3>
                    <p>简短描述案例内容和成果</p>
                </div>
                <div class="case-card">
                    <img src="images/case3.jpg" alt="案例3">
                    <h3>案例标题3</h3>
                    <p>简短描述案例内容和成果</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-preview">
        <div class="container">
            <h2 class="section-title">联系我们</h2>
            <p>如果您有任何问题或需求，请随时与我们联系</p>
            <a href="contact.html" class="btn">立即咨询</a>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <h3>品牌名称</h3>
                    <p>提供专业的企业解决方案</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="services.html">服务项目</a></li>
                        <li><a href="products.html">产品展示</a></li>
                        <li><a href="contact.html">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系方式</h3>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> 北京市朝阳区XX大厦</li>
                        <li><i class="fas fa-phone"></i> (010) 12345678</li>
                        <li><i class="fas fa-envelope"></i> contact@example.com</li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 品牌名称. 保留所有权利</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 